<%--
  Created by IntelliJ IDEA.
  User: ykq
  Date: 2024/3/15
  Time: 14:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录页面</title>
    <%--引入vue的js--%>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <%--引入element的js--%>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="/js/axios.min.js"></script>
    <%--引入elementui的样式--%>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        * {
            margin: 0px;
            padding: 0px;
            font-size: 12px;
        }
        html,body,#app{
           height: 100%;
        }

        .el-header, .el-footer {
            background-color: #23262e;
            color: #333;
            text-align: center;
            line-height: 60px;
        }


        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 160px;
        }

        #app >.el-container {
            height: 100%;
        }

        .el-aside {
            background-color: #545c64;
            color: #333;
            height: 100%;
            overflow-x: scroll;
            overflow-y: hidden;
            white-space: nowrap;
        }

        .el-aside > .el-menu {
            border-right: none;
        }

        .el-aside > .el-menu > .el-menu-item > a {
            color: white;
            text-decoration: none;
            cursor: pointer;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <div class="top_left" style="float: left;width: 30%;">
                <img src="/images/logo1.jpg" width="60px">
            </div>
            <div class="top_center" style="font-size: 48px;color: #2b6265;text-align:center;float: left;width: 40%">
                小张的快乐总店
            </div>
            <div class="top_right" style="float: right;width: 30%;text-align: right">
                <el-avatar :src="userinfo.url"></el-avatar>
                <el-dropdown  @command="handleCommand">
                      <span class="el-dropdown-link">
                        {{userinfo.staffname}}<i class="el-icon-arrow-down el-icon--right"></i>
                      </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="info">个人信息</el-dropdown-item>
                        <el-dropdown-item command="updatePwd">修改密码</el-dropdown-item>
                        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </el-header>
        <el-container>
            <!-- 侧边栏 -->
            <el-aside width="220px">
                <%--unique-opened:唯一打开。--%>
                <el-menu
                        class="el-menu-vertical-demo"
                        background-color="#545c64"
                        text-color="#fff"
                        :unique-opened="true"
                >
                    <el-submenu v-for="menu in leftMenus" :index="menu.mid+''">
                        <template slot="title">
                            <i :class="menu.icon"></i>
                            <span>{{menu.mname}}</span>
                        </template>
                        <el-menu-item v-for="child in menu.children" :index="child.mid+''">
                            <i :class="child.icon"></i>
                           <a :href="child.murl" style="text-decoration: none;color: white;" target="main"> {{child.mname}}</a>
                        </el-menu-item>

                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                 <iframe src="index.jsp" name="main" width="100%" height="100%" frameborder="0"></iframe>
            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<script>
    let app = new Vue({
        el: "#app",
        data:{
            //当前用户信息
            userinfo:{},
            //左侧菜单集合
            leftMenus:[],
        },
        created(){
             //加载当前用户的信息
             this.loadUserInfo();
             //加载左侧菜单
             this.leftMenu();
        },
        methods:{
             //加载左侧菜单
            leftMenu(){
               axios.get("/menu/leftMenu").then(result=>{
                   this.leftMenus=result.data.data;
                   console.log(this.leftMenus)
               })
            },

             loadUserInfo(){
                 axios.get("/staff/getInfo").then(result=>{
                        this.userinfo=result.data.data;
                 })
             },
            handleCommand(command) {
                if(command==="logout"){
                    alert("退出")
                }else if(command==="info"){
                    alert("个人信息")
                }
            }
        }

    })
</script>

</html>
